<template>
    <div class="box">
        <h2>Son1 子组件</h2>
        从vuex中获取的值: <label>{{ count }}</label>
        <br />
        <button @click="handleAdd(1)">值 + 1</button>
        <button @click="handleAdd(5)">值 + 5</button>
        <button @click="handleAdd(10)">值 + 10</button>
        <button @click="handleWait">一秒后修改为666</button>
        <button @click="changeTitle">改标题</button>
        <br />
        <hr />
        <h3>通过store方式 访问模块中的state</h3>
        <div>{{ $store.state.user.username }}</div>
        <div>{{ $store.state.user.age }}</div>
        <div>{{ $store.state.user.hobby }}</div>
        <br />
        <hr />
        <h3>通过store方式 访问模块中的getters</h3>
        <!-- Error 不能这么访问 -->
        <!-- <div>{{ $store.getters.user.upperCaseName }}</div> -->
        <div>{{ $store.getters['user/upperCaseName'] }}</div>

        <!-- mutation 修改用户名 -->
        <button @click="$store.commit('user/updateUser', '果果')">
            修改用户名
        </button>
        <!-- actions 一秒之后，修改settings，theme主题 -->
        <div>{{ theme }}</div>
        <button @click="$store.dispatch('settings/updateTheme', 'skyblue')">
            一秒后修改Theme
        </button>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    name: 'Son1Com',
    computed: {
        // state / getters
        // count() {
        //     return this.$store.state.count
        // }
        ...mapState('settings', ['theme']),
        ...mapState(['count'])
    },
    created() {
        console.log(this.$store.getters)
    },
    methods: {
        ...mapMutations(['changeCount']),
        handleWait() {
            // dispatch action
            this.$store.dispatch('awaitToAdd', 666)
        },
        handleAdd(n) {
            // mapState, 这种形式修改也不行
            // this.count++
            // 这句话，不符合单向数据流的规范
            // 子组件不应该操作父组件中的数据，同理，子组件中也不应该操作store中的数据
            // this.$store.state.count++

            // 要提交一个mutation方法  => 参数如果要传，这里只能写一个  => str, num, [] {}等
            this.$store.commit('addCount', n)
            // this.$store.commit('addCount', {
            //     count: n,
            //     msg: 'hello'
            // })
        },
        changeTitle() {
            this.$store.commit('changeTitle', 'vuex-mutation')
        }
    }
}
</script>

<style lang="css" scoped>
.box {
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
}
h2 {
    margin-top: 10px;
}
</style>
